<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>首页-欢迎页</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../component/pear/css/pear.css"/>
    <link rel="stylesheet" href="../../admin/css/other/console1.css"/>
    <!-- 主 题 更 换 -->
    <style id="pearadmin-bg-color"></style>
</head>
<style>

    .pear-container {
        background: linear-gradient( rgba(0,0,0,0.4), rgba(0, 0, 0, 0.4) ),url('https://api.sunweihu.com/api/bing1/api.php')
        no-repeat center center fixed;
    }

    #Greetings_body {
        position: fixed;
        top: 50%;
        left: 50%;
        width: 50%;
        height: 50%;
        justify-content: center;
        -webkit-transform: translateX(-50%) translateY(-50%);
        box-shadow: 1px 1px 2px 2px rgba(172, 172, 172, 0.2);
        background-color: rgba(255,255,255,0.4);
        border-radius: 8px;
        backdrop-filter: blur(20px);
        transition: all .5s;
    }

    #Greetings_body:hover {
        transition: all .5s;
        position: fixed;
        top: 50%;
        left: 50%;
        width: 50%;
        height: 50%;
        -webkit-transform: translateX(-50%) translateY(-50%);
        box-shadow: 1px 2px 6px 4px rgba(199, 193, 193, 0.267);
        background-color: rgba(255,255,255,0.5);
        border-radius: 8px;
        backdrop-filter: blur(15px);
    }

    .cardHead {
        position: absolute;
        top: 0;
        left: 0;
        background-color: rgba(65, 65, 65, 0.3);
        width: 100%;
        height: 30px;
        z-index: -1;
    }

    #Greetings {
        position: relative;
        left: 0;
        right: 0;
        top: 30px;
        width: 80%;
        margin: 0 auto;
        border-bottom: transparent;

    }

    .layui-card-body {
        position: relative;
        margin: auto;
        top: 90px;
        width: 90%;
    }
    .layui-card-body:hover {
        position: relative;
        margin: auto;
        top: 90px;
        width: 90%;
        background-color: rgba(21, 20, 20, 0.1);
    }

    #divid {
        position: relative;
        width: 250px;
        margin: 0 auto;
        top: 60px;
        background-color: black;
        height: 0px;
        border: 1px solid rgb(8, 133, 95)
    }
</style>
<body class="pear-container">
<div>
    <div class="layui-row layui-col-space10 layui-col-md12">
        <div id="Greetings_body" class="layui-card" style="text-align: center;">
            <div class="cardHead"></div>
            <div class="layui-card-header" id="Greetings"></div>
            <div id="divid"></div>

            <div class="layui-card-body" style="line-height: 35px">
                <span id="hitokoto_text" style="font-weight:500;font-size:22px"></span>
                <span id="hitokoto_author" style="font-weight:700;text-align: right;font-size:18px"></span>
            </div>
        </div>
    </div>

</div>
<!--</div>-->
<script src="../../component/layui/layui.js"></script>
<script src="../../component/pear/pear.js"></script>
<script>
    layui.use(['layer', 'echarts', 'element', 'count'], function () {
        var $ = layui.jquery,
            layer = layui.layer,
            element = layui.element,
            count = layui.count,
            echarts = layui.echarts;

        // count.up("value1", {
        //     time: 3000,
        //     num: 1028,
        //     bit: 0,
        //     regulator: 100
        // })
        //
        // count.up("value2", {
        //     time: 3000,
        //     num: 1028,
        //     bit: 0,
        //     regulator: 100
        // })
        //
        // count.up("value3", {
        //     time: 3000,
        //     num: 1028,
        //     bit: 0,
        //     regulator: 100
        // })
        //
        // count.up("value4", {
        //     time: 3000,
        //     bit: 0,
        //     num: 1028,
        //     regulator: 100
        // })
        //
        // var echartsRecords = echarts.init(document.getElementById('echarts-records'), 'walden');
        //
        // var option = {
        //     tooltip: {
        //         trigger: 'axis'
        //     },
        //     xAxis: [{
        //         type: 'category',
        //         data: ['2020-11', '2020-12', '2021-01', '2021-02', '2021-03', '2021-04'],
        //         axisLine: {
        //             lineStyle: {
        //                 color: "#bfbfbf"
        //             }
        //         }
        //     }],
        //     yAxis: [{
        //         type: 'value',
        //         splitNumber: 4,
        //         splitLine: {
        //             lineStyle: {
        //                 type: 'dashed',
        //                 color: '#DDD'
        //             }
        //         },
        //         axisLine: {
        //             show: false,
        //             lineStyle: {
        //                 color: "#333"
        //             },
        //         },
        //         nameTextStyle: {
        //             color: "#999"
        //         },
        //         splitArea: {
        //             show: false
        //         }
        //     }],
        //     series: [{
        //         name: '课时',
        //         type: 'line',
        //         data: [23, 60, 20, 36, 100, 85],
        //         lineStyle: {
        //             normal: {
        //                 width: 8,
        //                 color: {
        //                     type: 'linear',
        //
        //                     colorStops: [{
        //                         offset: 0,
        //                         color: '#A9F387' // 0% 处的颜色
        //                     }, {
        //                         offset: 1,
        //                         color: '#48D8BF' // 100% 处的颜色
        //                     }],
        //                     globalCoord: false // 缺省为 false
        //                 },
        //                 shadowColor: 'rgba(72,216,191, 0.3)',
        //                 shadowBlur: 10,
        //                 shadowOffsetY: 20
        //             }
        //         },
        //         itemStyle: {
        //             normal: {
        //                 color: '#fff',
        //                 borderWidth: 10,
        //                 /*shadowColor: 'rgba(72,216,191, 0.3)',
        //                 shadowBlur: 100,*/
        //                 borderColor: "#A9F387"
        //             }
        //         },
        //         smooth: true
        //     }]
        // };
        // echartsRecords.setOption(option);

        // window.onresize = function () {
        //     echartsRecords.resize();
        // }

    });
</script>
</body>
<script>
    window.onload = function () {
        getInfo();
        setGreeting();
    }

    function getTime() {
        let date = new Date;
        return date.getHours()
    }

    function setGreeting() {
        let now = getTime();
        let gretting = document.getElementById('Greetings');
        if (now >= 19 || now < 6) {
            gretting.innerHTML = '<h1>Hi~ 晚上好</h1>'
        }
        if (now >= 6 && now <= 10) {
            gretting.innerHTML = '<h1>Hi~ 早上好</h1>'
        }
        if (now >= 10 && now <= 12) {
            gretting.innerHTML = '<h1>Hi~ 中午好</h1>'
        }
        if (now > 12 && now < 19) {
            gretting.innerHTML = '<h1>Hi~ 下午好</h1>'
        }
    }

    function getInfo() {
        fetch('https://v1.hitokoto.cn?c=g')
            .then(response => response.json())
            .then(data => {
                const hitokoto = document.getElementById('hitokoto_text')
                const hitokotoauth = document.getElementById("hitokoto_author")
                hitokoto.href = 'https://hitokoto.cn/?uuid=' + data.uuid
                hitokoto.innerText = data.hitokoto
                hitokotoauth.innerHTML = '<br>' + ' —— ' + '『' + data.from + '』'
            })
            .catch(console.error)
    }
</script>

</html>